import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Radio, Row, Spin, Col, Tag, Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { routerRedux } from 'dva/router';

import { getParamUrl } from '../../utils/formatDataSource';

@connect(({ pingce, studentDetailConfig, loading }) => ({
  pingce,
  studentDetailConfig,
  loading: loading.effects['pingce/getAppValue'],
}))
class Comment extends PureComponent {
  state = {
    appData: [],
    levelPc: [],
  };
  componentDidMount = () => {
    this.initData();
  };
  initData = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'pingce/getAppValue',
      payload: params,
    }).then(() => {
      const { appData } = this.props.pingce;
      this.setState({
        appData,
      });
    });
    dispatch({
      type: 'studentDetailConfig/getStudentLevelInfo',
      payload: {
        studentId: params.studentId,
      },
    }).then(() => {
      const { levelPc } = this.props.studentDetailConfig;
      this.setState({ levelPc: levelPc.data });
    });
  };
  getHeadDom = () => {
    const { appData } = this.state;
    return appData.map((d, i) => {
      return (
        <div key={i}>
          <div style={{ fontSize: '20px', marginBottom: '15px' }}>
            <strong>{d.head}</strong>
          </div>
          <div style={{ marginBottom: '20px' }}>
            {d.questions.map((v, i) => {
              return (
                <div key={i}>
                  <div style={{ marginBottom: '10px' }}>
                    {i + 1}.{v.value}
                  </div>
                  <div style={{ marginBottom: '10px' }}>{v.answer}</div>
                </div>
              );
            })}
          </div>
        </div>
      );
    });
  };
  getLevelDom = () => {
    return (
      <div>
        <div style={{ fontSize: '20px', marginBottom: '15px' }}>
          <strong>评测定档：</strong>
        </div>
        <div style={{ marginBottom: '20px' }}>
          <Row>
            <Col span={8}>数学档位：{this.getOne(1)}</Col>
            <Col span={8}>语文档位：{this.getOne(2)}</Col>
            <Col span={8}>英语档位：{this.getOne(3)}</Col>
          </Row>
          <br />
          <Row>
            <Col span={8}>物理档位：{this.getOne(4)}</Col>
            <Col span={8}>化学档位：{this.getOne(5)}</Col>
            <Col span={8}>生物档位：{this.getOne(6)}</Col>
          </Row>
          <br />
          <Row>
            <Col span={8}>地理档位：{this.getOne(7)}</Col>
            <Col span={8}>历史档位：{this.getOne(8)}</Col>
            <Col span={8}>政治档位：{this.getOne(9)}</Col>
          </Row>
        </div>
      </div>
    );
  };
  getOne = type => {
    const { levelPc } = this.state;
    if (levelPc.length === 0) {
      return '';
    }
    const one = levelPc.find(l => l.type === type);
    if (one.status === 0) {
      return <Tag color="cyan">未签约</Tag>;
    } else if (one.status === 1) {
      return <Tag color="cyan">未定档</Tag>;
    } else {
      return <Tag color="cyan">{one.msg}</Tag>;
    }
  };
  backPage = () => {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    const { studentId } = params;
    dispatch(routerRedux.push(`/studentManage/student/info?studentId=${studentId}`));
  };

  render = () => {
    const { data } = this.props.pingce;
    return (
      <PageHeaderLayout>
        <Card style={{ textAlign: 'right' }} bordered={false}>
          <Button type="primary" size="small" onClick={this.backPage}>
            返回
          </Button>
        </Card>
        <Card style={{ minHeight: '920px' }}>
          <Spin tip="Loading..." spinning={this.props.loading}>
            {this.getHeadDom()}
            <br />
            {this.getLevelDom()}
          </Spin>
        </Card>
      </PageHeaderLayout>
    );
  };
}

export default Comment;
